import React from 'react'
import { Avatar, AvatarImage } from './ui/avatar'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const avatarVariants = cva('rounded-full', {
    variants: {
        size: {
            default: 'h-9 w-9',
            xs: 'h-4 w-4',
            sm: 'h-6 w-6',
            lg: 'h-10 w-10',
            xl: 'h-[160px] w-[160px]',
        }
    },
    defaultVariants: {
        size: 'default',
    }
})

interface UserAvatarProps extends VariantProps<typeof avatarVariants> {
    imageUrl: string,

    name: string,
    className?: string,
    onClick?: () => void,
}

export default function UserAvatar({
    imageUrl,
    size,
    name,
    className,
    onClick,
}: UserAvatarProps) {
    return (
        <Avatar onClick={onClick} className={cn(avatarVariants({ size, className }))}>
            <AvatarImage src={imageUrl} alt={name} />
        </Avatar>
    )
}